<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        html{
            width: 3000px;
            height: 5000px;
        }
        .fixed{
            position: fixed;
            right: 5px;
            top: 0;
        }
    </style>
</head>
<body>
    <button class="openBtn">打开百度</button>
    <button class="closeBtn">关闭百度</button>
    <div class="fixed">
        <button class="scrollByBtn">scrollBy</button>
        <button class="scrollToBtn">scrollTo</button>
    </div>
</body>
<script>
    // 页面版心不要超过 1280   => 分辨率越好 -> 显示内容就越小

    // 设备分辨率: 1280 x 720      页面 x 1
    // 设备分辨率: 1366 x 768      页面 x 1
    // 设备分辨率: 1920 x 1080     页面 x 1.25 = 1920   (页面 1536)
    // 设备分辨率: 2560 x 1440     页面 x 2 = 2560   (页面 1280)
    // 设备分辨率: 3620 x 2036     页面 x 2.5 = 3620 (页面 1440) 


</script>
<script>
    // window对象的相关属性和方法
    
    // 属性:
    // name   窗口的名称
    // status 窗口的状态
    // innerWidth   窗口的可视宽度 (页面的可视宽度 + 滚动条  不包含控制台)
    // innerHeight  窗口的可视高度 (页面的可视高度 + 滚动条  不包含控制台)
    // outerWidth   窗口的实际宽度 (页面的可视宽度 + 滚动条 + 控制台)
    // outerHeight  窗口的实际高度 (浏览器顶部到底部的位置) 
    
    // console.log(window.innerWidth, window.innerHeight);
    // console.log(window.outerWidth, window.outerHeight);
    
    // 方法: 
    // alert()    弹出框/警告框
    // prompt()   弹出输入框
    // confirm()  确认框

    // setInterval()
    // clearInterval()
    
    // setTimeout()
    // clearTimeout()

    // open(url,name,窗口特征)    打开新的窗口或查找一个已命名的窗口
    // url 窗口加载的url地址
    // name 给打开的窗口定义窗口名称(默认"")  每次打开时先查找是否存在该名称的窗口 不存在 => 打开新的 存在 => 直接切换该窗口,刷新
    // 窗口特征 可以定义窗口的大小和相对于屏幕的位置(每个特征之间用逗号分隔)

    // 返回值: 被打开的窗口的window 

    // 注意: 除了可以开启网页,也可以打开本地页面

    // close()   关闭指定窗口(对应窗口对象window关闭)

    // scrollBy(x,y)   相对于滚动条的当前位置 滚动对应的距离 
    // x 水平滚动条 正值相加  负值相减
    // y 垂直滚动条 正值相加  负值相减
    // scrollTo(x,y)  


    var openBtn = document.getElementsByClassName("openBtn")[0];
    var closeBtn = document.getElementsByClassName("closeBtn")[0];
    var scrollByBtn = document.getElementsByClassName("scrollByBtn")[0];
    var scrollToBtn = document.getElementsByClassName("scrollToBtn")[0];

    var subWindow = null;

    openBtn.onclick = function(){
        // window.open("https://www.baidu.com"); //打开新窗口,载入百度页面
        // window.open("https://www.baidu.com", "baidu"); //打开新窗口,载入百度页面 将窗口命名为百度
        // window.open("https://www.baidu.com", "baidu","width=600px,height=400px,left=100px,top=200px"); //打开新窗口,载入百度页面 将窗口命名为百度

        subWindow = window.open("./07 圆形钟表.html", "时钟",); //打开新窗口,载入本地页面 将窗口命名为百度 => 返回被打开的窗口的window
    }

    closeBtn.onclick = function(){
        // window  -> 当前窗口的window 
        // window.close();  关自己

        // 关闭打开的窗口
        if(subWindow){
            subWindow.close();
        }
    }

    scrollByBtn.onclick = function(){
        window.scrollBy(100,100);
    }

    scrollToBtn.onclick = function(){
        window.scrollTo(1000,3000);
    }
</script>
</html>